<template>
	<view>
		<luomiaoQushuiying v-if="platform == 'ios'" ref="qushuiyingCmp" :lineWidth="lineWidth"
			:containerHeight="containerHeight" uploadImgStyle="width:100rpx" :containerWidt="containerWidth"
			:Image="Image"></luomiaoQushuiying>
		<luomiaoQushuiyingAndriod v-if="platform == 'android'" ref="qushuiyingCmp" :lineWidth="lineWidth"
			:containerHeight="containerHeight" uploadImgStyle="width:100rpx" :uploadImg="uploadImg"
			:containerWidt="containerWidth" :Image="Image"></luomiaoQushuiyingAndriod>
	</view>
</template>

<script>
	import luomiaoQushuiyingAndriod from './components/luomiao-qushuiying-andriod.vue';
	import luomiaoQushuiying from './components/luomiao-qushuiying.vue';
	let timeId;
	export default {
		components: {
			luomiaoQushuiyingAndriod,
			luomiaoQushuiying,
		},
		props: {
			Image: {
				type: String,
				default: () => {
					return '';
				},
			},
			// 画笔颜色
			lineColor: {
				type: String,
				default: 'rgba(8, 0, 255, 0.1)',
			},
			// 画笔宽度
			lineWidth: {
				type: Number,
				default: 20,
			},
			containerHeight: {
				type: Number,
				default: 450,
			},
			containerWidth: {
				type: Number,
				default: uni.getSystemInfoSync().screenWidth,
			},
			uploadImg: {
				type: String,
				default: 'https://bpic.588ku.com/element_origin_min_pic/19/04/24/850ddb30377bf66e92f68a60f92c827a.jpg',
			},
		},
		data() {
			return {
				// containerHeight: 450,
				isBlock: false,
				// lineWidth: 20,
				timeIntverCount: 3,
				platform: getApp().globalData.platform,
			};
		},

		methods: {
			handleChanging({
				detail
			}) {
				this.isBlock = true;
				this.timeId = setTimeout(() => {
					if (this.timeId) clearTimeout(this.timeId);
					this.isBlock = false;
				}, 1500);
				this.lineWidth = detail.value;
			},
			redo() {
				this.$refs.qushuiyingCmp.redo();
			},
			async saveCanvas(e) {
				await this.$refs.qushuiyingCmp.handleTotalPoints()
				return new Promise((resolve, reject) => {
					this.$refs.qushuiyingCmp
						.saveCanvas(e)
						.then(async ({
							maskImg,
							orgImg
						}) => {
							resolve({
								orgImg,
								maskImg
							})
						})
						.catch((rej) => {
							console.log(rej);
							reject(rej)
							// uni.showToast({
							// 	title: rej,
							// 	icon: 'none',
							// });
						});
				})

			},

			// 处理水印图片
			handleImageQuShuiYin(image_id, mask_id) {
				imageQuShuiYin({
					image_id,
					mask_id,
				}).then((res) => {
					setTimeout(async () => {
						await this.handleQuShuiYinQuery(res);
					}, 1);
				});
			},
			// 处理查询水印
			async handleQuShuiYinQuery(res) {
				// 三次机会
				this.timeIntverCount--;
				// 三次用完 进入判断
				if (this.timeIntverCount === -1) {
					// 之前有setTimeout 就直接返回
					if (!timeId) {
						// 没有setTimeout 等 5秒再给 3次机会
						timeId = setTimeout(() => {
							clearTimeout(timeId);
							this.timeIntverCount = 3;
						}, 5000);
					}
					uni.showToast({
						title: '网络问题,请等5秒后重试!',
					});
					return;
				}

				let result = await quShuiYinQuery({
					huanlian_id: res.data.huanlian_id,
				});
				if (!result.data.image_url) {
					// 没有返回图片 等1秒调用递归函数
					setTimeout(async () => {
						await this.handleQuShuiYinQuery(res);
						// 纪录间隔时间
					}, 1000);
				} else {
					// 返回图片了 把三次机会再返回给用户
					this.timeIntverCount = 3;
					console.log(result);
				}
			},
			resetImg() {
				this.$refs.qushuiyingCmp.resetImg();
			},

		},
	};
</script>
<style lang="scss" scoped>
</style>